<template>
    <div class="text_button_box">
        <!-- 修改按钮 -->
        <div class="edit_btn" v-if="type == 'edit'">
            <Icon type="md-create" />
            <div class="label">
                <slot>修改</slot>
            </div>
        </div>

        <!-- 修改按钮 -->
        <div class="add_btn" v-if="type == 'add'">
            <Icon type="md-add" />
            <div class="label">
                <slot>添加</slot>
            </div>
        </div>

        <!-- 删除按钮 -->
        <div class="del_btn" v-if="type == 'del'">
            <Icon type="ios-trash" />
            <div class="label">
                <slot>删除</slot>
            </div>
        </div>

        <!-- 查看按钮 -->
        <div class="look_btn" v-if="type == 'look'">
            <Icon type="ios-eye" />
            <div class="label">
                <slot>查看</slot>
            </div>
        </div>

        <!-- 自定义按钮 -->
        <div class="edit_btn" v-if="type == 'custom'">
            <div class="label">
                <slot></slot>
            </div>
        </div>

        <div class="normal_btn" v-if="type == 'normal'">
          <Icon :type="icon" v-if="icon" />
            <div class="label">
                <slot></slot>
            </div>
        </div>
        <div class="edit_btn" v-if="type === null">
            <div class="label">
                <slot>查看</slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
defineProps({
    type: {
        type: String,
        default: 'edit'
    },
    icon: {
      type: String,
      default: ''
    }
})
</script>

<style lang="scss">
.text_button_box {
    display: inline-flex;
    justify-content: center;
    &>div {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0px 5px;
        cursor: pointer;
        .label {
            margin-left: 3px;
        }
    }
    .edit_btn {
        color: #2d8cf0;
    }
    .look_btn {
        color: #19be6b;
    }
    .del_btn {
        color: #ed4014;
    }
    .add_btn {
        color: #2b85e4;
    }
    .normal_btn {
      color: #333;
    }
}
</style>